<script setup>
import { ref } from 'vue'
import { RouterLink } from 'vue-router'
const collapsed = ref(false) // 控制底部区域的展开和收起

// 切换收起和展开状态
const toggle = () => {
  collapsed.value = !collapsed.value
}

// 监听measure元素的hover显示隐藏Popover
const showPopover = ref(false)
</script>

<template>
  <!-- 主功能面板 -->
  <div class="bottom-area" :class="{ collapsed: collapsed }">
    <div>
      <RouterLink to="/map/rotate">旋转</RouterLink>
    </div>
    <div>
      <RouterLink to="/map/plot">控制台</RouterLink>
    </div>
    <div>
      <RouterLink to="/map/city">城市视图</RouterLink>
    </div>
    <div>
      <RouterLink to="/map/search">查询</RouterLink>
    </div>
    <div>
      <RouterLink to="/Map/Bridge">桥梁</RouterLink>
    </div>
    <div>
      <div
        class="Popover"
        v-show="showPopover"
        @mouseenter="showPopover = true"
        @mouseleave="showPopover = false"
      >
        <div class="measureIcon" title="直线测量">
          <RouterLink to="/Map/Measure/line">
            <i class="iconfont icon--_zhexian"></i>
          </RouterLink>
        </div>
        <div class="measureIcon" title="矩形测量">
          <RouterLink to="/Map/Measure/rect">
            <i class="iconfont icon-juxing"></i>
          </RouterLink>
        </div>
        <div class="measureIcon" title="多边形测量">
          <RouterLink to="/Map/Measure/polygon">
            <i class="iconfont icon-duobianxing"></i>
          </RouterLink>
        </div>
        <div class="measureIcon" title="圆形测量">
          <RouterLink to="/Map/Measure/circle">
            <i class="iconfont icon-24gl-circle"></i>
          </RouterLink>
        </div>
      </div>
      <span class="measure" @mouseenter="showPopover = true"> 测量距离 </span>
    </div>
    <!-- 收起按钮 -->
    <div class="collapse-btn" @click="toggle" title="收起">
      <i class="iconfont icon-shouqitubiao-down"></i>
    </div>
  </div>

  <!-- 展开按钮 -->
  <div v-if="collapsed" class="bottom-expand-btn" @click="toggle" title="展开">
    <i class="iconfont icon-shouqitubiao-up"></i>
  </div>
</template>

<style scoped>
.bottom-area {
  position: absolute;
  bottom: 0;
  /* 底部居中 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px 5px 0 0;
  padding: 10px 30px;
  color: rgb(189, 189, 189);
  transition: transform 0.35s ease;
  cursor: pointer;
}
.bottom-area div {
  flex: 0 0 auto;
}
.collapse-btn:hover {
  color: white;
}
.bottom-area.collapsed {
  transform: translate(-50%, 100%);
}

/* 展开按钮 */
.bottom-expand-btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  color: rgb(189, 189, 189);
  backdrop-filter: blur(4px);
}
.bottom-expand-btn:hover {
  color: white;
}

/* 弹框 */
.bottom-area .Popover {
  position: absolute;
  bottom: 50px;
  right: 15px;
  display: flex;
  gap: 10px;
  border: 1px solid gray;
  padding: 10px;
}
.Popover .iconfont {
  font-size: 24px;
  color: gray;
}
.Popover .iconfont:hover {
  color: white;
}
</style>
